/* eslint-disable eqeqeq */
import React, { useState, useEffect } from "react";
import { lineList } from "../API/busAPI";
import { Card, SearchBar } from "antd-mobile";
import "../css/bus.less";
import { useHistory } from "react-router-dom";
import Header from "../../Header";

export default function CustomShuttle() {
  const [list, setList]: any = useState([]);
  const history = useHistory();

  const handleList = async () => {
    let res = await lineList("");
    console.log(res.data.rows);
    if (res.data.code == 200) {
      setList(res.data.rows);
    }
  };

  useEffect(() => {
    handleList();
  }, []);

  const click = (id: any) => {
    history.push(`/bus_query/line_service/${id}`);
  };

  const onFocus = () => {
    history.push("/bus_query/stop_query");
  };

  return (
    <div>
      <Header title="线路图"></Header>
      <div className="xz-content">
        <SearchBar
          placeholder="查询站点"
          style={{ marginBottom: "10px" }}
          onFocus={onFocus}
        />
        {list.map((item: any) => {
          return (
            <Card
              title={item.name}
              key={item.id}
              className="xz-card"
              extra="点击卡片查看详情"
              onClick={() => click(item.id)}
            >
              <div>
                <span>起点：{item.first}</span> ————{" "}
                <span>终点：{item.end}</span>
              </div>
              <div>里程：{item.mileage + "km"} </div>
              <div>价格：{"￥" + item.price}</div>
            </Card>
          );
        })}
      </div>
    </div>
  );
}
